<template>
  <div class="container">
    <el-dialog :visible="isShow" :show-close="false" @close="handleClose" width="1000px">
      <div class="title" v-if="title">{{ title }}</div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        header-cell-class-name="list-header"
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" align="center"></el-table-column>

        <el-table-column
          v-for="item in tableOptions"
          :key="item.id"
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          :min-width="item.minWidth"
        >
          <template slot-scope="{ row }">
            <span v-if="item.prop">{{ row[item.prop] }}</span>

            <div v-if="item.id == 'TAB_HOUSE_TYPE'">
              <el-radio-group v-model="row['houseType']" :disabled="radioGroupDisabled(row.portType)">
                <template v-for="(option, i) in portPublishConfig[row.portType].houseTypeOptions">
                  <el-radio :key="i" :label="option.label">{{ option.name }}</el-radio>
                </template>
              </el-radio-group>
            </div>
            <div v-if="item.id == 'TAB_PUBLISH_TYPE'">
              <el-radio-group v-model="row['publishType']" :disabled="radioGroupDisabled(row.portType)">
                <template v-for="(option, i) in portPublishConfig[row.portType].publishTypeOptions">
                  <el-radio
                    :key="i"
                    :label="option.label"
                    :disabled="option.disableVerify ? option.disableVerify(getPortItem(row.portType)) : false"
                    >{{ option.name }}</el-radio
                  >
                </template>
              </el-radio-group>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="port-package" v-if="portPackageList && portPackageList.length">
        您当前未购买({{ portPackageList.join(',') }})端口套餐，仅支持发布至房源库
      </div>
      <div class="d-flex jc-end mt30">
        <el-button class="form-btn" size="mini" plain @click="handleCancel">取消</el-button>
        <el-button class="form-btn" type="primary" size="mini" @click="handlePublish" :disabled="!pushable"
          >立即推送</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { portPublishConfig } from '@/config/house/platform';
import platform from '@/config/house/platform';

export default {
  name: 'PublishHouseDialog',

  components: {},

  props: {
    title: {
      type: String,
      default: ''
    },
    isShow: {
      type: Boolean,
      default: false
    },
    portInfo: {
      type: Array,
      default() {
        return [];
      }
    }
  },

  data() {
    this.portPublishConfig = portPublishConfig;

    return {
      tableOptions: [
        { id: 'TAB_NAME', label: '网站', prop: 'portName', minWidth: '100' },
        { id: 'TAB_HOUSE_TYPE', label: '房源类型', minWidth: '200' },
        { id: 'TAB_PUBLISH_TYPE', label: '推送类型', minWidth: '200' }
      ],
      tableData: this.getTableData().filter((v) => !!portPublishConfig[v.portType]),
      tableSelect: []
    };
  },

  computed: {
    portPackageList() {
      return this.portInfo.filter((item) => item.comboIsBuy != '1').map((item) => platform[item.portType]);
    },
    getPortItem({ portInfo }) {
      return (portType) => portInfo.find((v) => v.portType === portType);
    },

    pushable({ tableSelect }) {
      if (tableSelect.length === 0) return false;
      return tableSelect.every((item) => {
        return item.publishType && item.houseType;
      });
    },

    radioGroupDisabled({ tableSelect }) {
      return (portType) => !tableSelect.find((v) => v.portType === portType);
    }
  },

  watch: {},

  beforeMount() {},

  mounted() {
    this.$nextTick(() => {
      this.tableData.forEach((item) => {
        this.$refs.multipleTable.toggleRowSelection(item, true);
      });

      this.checkPortInfo();
    });
  },

  methods: {
    getTableData() {
      const { portInfo } = this;
      return portInfo.map((item) => {
        const { portType } = item;
        return {
          id: portType,
          portType: portType,
          portName: platform[portType],
          houseType: null,
          publishType: null,
          hasPackage: false
        };
      });
    },

    checkPortInfo() {
      const { portInfo, tableData } = this;
      portInfo.forEach((port) => {
        const { portType } = port;
        const config = portPublishConfig[portType];
        for (const key in config) {
          let element = config[key];
          if (Array.isArray(element)) {
            element = element.filter((item) => {
              return item.disableVerify ? !item.disableVerify(port) : true;
            });

            if (element[0]) {
              const tableItem = tableData.find((d) => d.portType === portType);
              const map = {
                houseTypeOptions: 'houseType',
                publishTypeOptions: 'publishType'
              };
              tableItem[map[key]] = element[0].label;
            }
          }
        }
      });
    },

    // 批量选择
    handleSelectionChange(e) {
      // console.log('批量选择' , e);
      this.tableSelect = e;
    },

    // 关闭弹窗
    handleClose() {
      this.$emit('update:isShow', false);
    },

    // 取消推送
    handleCancel() {
      this.$emit('update:isShow', false);
    },

    // 推送
    handlePublish() {
      this.$emit('publish', this.tableSelect);
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  & /deep/ .el-dialog {
    border-radius: 20px;
  }
  & /deep/ .el-dialog__body {
    padding: 32px;
  }
  & /deep/ .el-dialog__header {
    padding: 0;
  }

  & /deep/ .el-table::before {
    height: 0;
  }

  & /deep/ .list-header {
    height: 44px;
    color: #213654;
    background-color: #dfecff;
  }

  & /deep/ .el-table__header .el-table-column--selection .cell {
    display: none;
  }

  & /deep/ .el-table td {
    border: none;
  }

  & /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: #f8fbff;
  }
}

.title {
  margin-bottom: 24px;
  font-size: 20px;
  font-weight: 700;
  color: #000;
  margin-left: 10px;
}

.form-btn {
  width: 80px;
}

.port-package {
  margin-top: 4px;
  text-align: right;
  font-size: 10px;
  color: #ff4949;
}
</style>
